<!--  -->
<template>
  <div>
    <div v-if="fromData&&fromData.fromComponent">
      <Form
        class="formContainer"
        size="small"
        label-position="left"
        :model="value"
        :rules="fromData.rules||{}"
        :label-width="70"
      >
        <div
          class="formContainerItem"
          v-for="(item,index) in fromData.fromComponent"
          :key="index"
          :style="item.type==='remark'?'width:90%':''"
        >
          <FormItem v-if="item.type==='string'" :label="item.lable" :prop="item.key">
            <Input v-model="value[item.key]" :placeholder="'请输入'+item.lable" />
          </FormItem>
          <FormItem v-if="item.type==='select'" :label="item.lable" :prop="item.key">
            <Select v-model="value[item.key]">
              <Option
                v-for="option in item.options"
                :key="option.value"
                :value="option.value"
              >{{option.label}}</Option>
            </Select>
          </FormItem>
          <FormItem v-if="item.type==='date'" :label="item.lable" :prop="item.key">
            <DatePicker v-model="value[item.key]" type="date"></DatePicker>
          </FormItem>
          <FormItem v-if="item.type==='time'" :label="item.lable" :prop="item.key">
            <TimePicker v-model="value[item.key]" type="time"></TimePicker>
          </FormItem>
          <FormItem v-if="item.type==='remark'" :label="item.lable" :prop="item.key">
            <Input v-model="value[item.key]" :placeholder="'请输入'+item.lable" />
          </FormItem>
        </div>
      </Form>
    </div>
    <Tabs v-if="fromData.tabPane&&fromData.tabPane.length>0" value="tabPane0">
      <TabPane
        v-for="(item,index) in fromData.tabPane"
        :key="'tabPane'+index"
        :label="item.label"
        :name="'tabPane'+index"
      >
        <component :is="item.content"  v-on="item.listen"></component>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      value: {}
    };
  },
  props: {
    fromData: Object
  },
  methods: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.fromData.fromComponent.forEach(element => {
      this.value[element.key] = "";
    });
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.formContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.formContainerItem {
  width: 30%;
  margin-right: 3%;
}
</style>
